import { Component } from 'react';
import bus from '../../util/bus';
import axios from 'axios'
import './LogAndRe.css'
import { withRouter } from 'react-router-dom';

class LogAndRe extends Component {

  state = {
    lodplay: 'block',
    redplay: 'none',
    log_in: null,
    input_useremail: '',
    input_password: '',
    re_username: '',
    re_useremail: '',
    re_userpassword: '',
    re_userpassword_again: '',
    passwordIsRight: true,
    emailIsRed: false,
  }
  logindplay = () => {
    this.setState({ lodplay: 'block' });
  }
  shutlogindplay = () => {
    this.setState({ lodplay: 'none' })
  }
  redplay = () => {
    this.setState({ lodplay: 'none', redplay: 'block' })
  }
  shutredplay = () => {
    this.setState({ redplay: 'none' })
  }

  //绑定邮箱和密码的输入框
  changelogEmail = (e) => {
    this.setState({ input_useremail: e.target.value })
  }

  changelogPassword = (e) => {
    this.setState({ input_password: e.target.value })
  }

  //绑定注册时邮箱的输入框
  changereEmail = (e) => {
    this.setState({ re_useremail: e.target.value })
  }

  changerename = (e) => {
    this.setState({ re_username: e.target.value })
  }

  changerepassword = (e) => {
    this.setState({ re_userpassword: e.target.value })
  }

  changerepasswordagain = (e) => {
    this.setState({ re_userpassword_again: e.target.value })
  }

  //尝试登录
  log_getUser = () => {
    const { input_useremail, input_password } = this.state;
    const { handleEmail } = this.props;
    const that = this;
    axios.post('https://qc2tcg.fn.thelarkcloud.com/getUser', { email: input_useremail, password: input_password }).then(
      (response) => {
        if (response.data.result != null) {
          handleEmail(that.state.input_useremail);
          // const { value } = response.data.result;
          that.setState({ log_in: true });
          const { routeProps } = that.props;
          console.log(routeProps);
          routeProps.history.push('/home', {
            useremail: that.state.input_useremail,
          })
        }
        else {
          that.setState({ log_in: false });
        }
      }
    )
  }

  re_setUser = () => {
    const { re_username, re_useremail, re_userpassword, re_userpassword_again } = this.state;
    const that = this;
    if(re_useremail != '' && re_username != '' && re_userpassword != '' && re_userpassword_again != ''){
      if (re_userpassword != re_userpassword_again) {
        that.setState({ passwordIsRight: false, emailIsRed: false });
        return;
      }
      else {
        axios.post('https://qc2tcg.fn.thelarkcloud.com/getUserEmail', { email: re_useremail }).then(
          (response) => {
            if (response.data.result != null) {
              // const { value } = response.data.result;
              that.setState({ emailIsRed: true, passwordIsRight: true });

            }

          },
          (reject) => {
            //进行注册
            axios.post('https://qc2tcg.fn.thelarkcloud.com/setUser', { name: re_username, email: re_useremail, password: re_userpassword }).then(
              (response) => {
                that.setState({ log_in: true, emailIsRed: false, passwordIsRight: true });
                const { routeProps } = that.props;

                routeProps.history.push('/home', {
                  useremail: that.state.input_useremail,
                })
              }
            )

          }
        )
      }
    }
  }
  componentDidMount () {
    const that = this;
    bus.on("logindplay", that.logindplay);
  }



  render () {
    return (
      <div id="logAndRe">
        <div className="m-test" style={{ display: this.state.lodplay }}>
          <div className="login">
            {/* 关闭功能*/}
            <span className="close" onClick={this.shutlogindplay}>&times;</span>

            <h2>用户登录</h2>
            <hr />
            <div className="input-group">
              {/*使用图标库*/}
              <i className="icon-user fa fa-user"></i>
              <input type="text" name="用户名" className="form-control" placeholder="请输入邮箱" onChange={this.changelogEmail} value={this.state.usemail} />
            </div>
            <div className="input-group">
              <i className="icon-user fa fa-lock"></i>
              <input type="password" name="密码" className="form-control" placeholder="请输入密码" onChange={this.changelogPassword} value={this.state.password} />
            </div>
            <div className="log-email tips" style={{ display: this.state.log_in == false ? "block" : "none" }}>邮箱或密码不正确</div>
            <div className="input-group btn-group">
              <button className="lobut" onClick={this.log_getUser}>登录</button>
            </div>
            <div className="register">
              <p className="nologin">还没有账号？</p>
              <p className="re" onClick={this.redplay}>立即注册</p>
            </div>
          </div>
        </div>
        <div className="retest" style={{ display: this.state.redplay }}>
          <div className="login">

            {/* 关闭功能*/}
            <span className="close" onClick={this.shutredplay}>&times;</span>
            <h2>用户注册</h2>
            <hr />
            <div className="input-group">
              {/*使用图标库*/}
              <i className="icon-user fa fa-user"></i>
              <input type="text" name="用户名" className="form-control" placeholder="请输入用户名" onChange={this.changerename} value={this.state.re_username} />
            </div>
            <div className="input-group">
              <i className="icon-user fa fa-envelope-o"></i>
              <input type="text" name="邮箱" className="form-control" placeholder="请输入邮箱" onChange={this.changereEmail} value={this.state.re_useremail} />
            </div>
            <div className="input-group">
              <i className="icon-user fa fa-lock"></i>
              <input type="password" name="密码" className="form-control" placeholder="请输入密码" onChange={this.changerepassword} value={this.state.re_userpassword} />
            </div>
            <div className="input-group">
              <i className="icon-user fa fa-lock"></i>
              <input type="password" name="确认密码" className="form-control" placeholder="请再次输入密码" onChange={this.changerepasswordagain} value={this.state.re_userpassword_again} />
            </div>
            <div className="log-email tips" style={{ display: this.state.passwordIsRight == false ? "block" : "none" }}>请确认您的密码输入正确</div>
            <div className="log-email tips" style={{ display: this.state.emailIsRed == true ? "block" : "none" }}>该邮箱已经被注册</div>
            <div className="input-group btn-group">
              <button className="lobut" onClick={this.re_setUser}>注册</button>
            </div>
          </div>
        </div>
      </div>
    )
  }

}

export default withRouter(LogAndRe);